<template>
  <Modal
    v-model:active="unitSeparation"
    transfer
    title="单元分离"
    hide-mask
    draggable
    :no-footer="true"
    @close="closeBtn"
    :width="650"
  >
    <div class="box">
      <Form :model="formUnitSeparation" style="width: 100%" :hide-label="true">
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">操作</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <RadioGroup v-model:value="formUnitSeparation.operaion">
              <Radio
                class="radioStyle"
                v-for="item in itemsList"
                :key="item"
                :label="item"
              ></Radio>
            </RadioGroup>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">选择器</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <div class="selector-buttons">
              <button class="selector-button active">单元</button>
              <button class="selector-button icon-button">
                <img
                  src="../../assets/delete.svg"
                  alt=""
                  class="icon imgStyle"
                />
              </button>
            </div>
          </div>
        </FormItem>
      </Form>
      <div class="foot-box">
        <Button @click="confirm">分离</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Form,
  FormItem,
  RadioGroup,
  Radio,
  NumberInput,
  Input,
  Grid,
  Cell,
  Dropdown,
  DropdownList,
  DropdownItem,
  Checkbox,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
const rightMeshEditStore = useRightMeshEditStore();
const { unitSeparation } = storeToRefs(rightMeshEditStore);
const formUnitSeparation = ref({
  operaion: "分离",
});

const itemsList = ref(["分离"]);

function confirm() {
  rightMeshEditStore.setUnitSeparationValue(formUnitSeparation.value);
  unitSeparation.value = false;
}
function closeBtn() {
  unitSeparation.value = false;
}
</script>

<style scoped>
.box {
  padding: 15px;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.imgStyle {
  width: 20px;
  height: 20px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
:deep(.vxp-form__item) {
  margin-bottom: 0px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.radioStyle {
  margin-right: 100px;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
</style>
